<template>
  <div>
	   	<span @click="startRecorder">{{tiptext}}</span>
	  	<audio ref="audioRecorder" src="" controls></audio>
  </div>
</template>

<script>
import { MediaStreamRecorder } from '@/external/MediaStreamRecorder.js'
export default {
  	name: 'recorderTest',
	data(){
		return{
			mcounter: 0, // 累积时间
			recording: false, // 标记是否在录音
			intervaltimerid: '', // 间隔时间定时器编号
			tiptext: '点击录音', // 提示文字
			mediaRecorder: null, // 录音笔
			mediaConstraints: {
				audio: true
			}
		}
	},
	methods:{
		startRecorder() {
			var that = this
			this.recording = !this.recording
			// 如果开始录音
			if (this.recording === true) {
				this.mcounter = 0
				this.tiptext = '录音中 ' + this.mcounter + 's'
				this.captureRecord()
				this.intervaltimerid = setInterval(() => {
					// 开始累积
					that.mcounter = that.mcounter + 1
					this.tiptext = '录音中 ' + that.mcounter + 's'
				}, 1000)
			} else { // 如果结束录音
				this.tiptext = '点击录音'
				this.mediaRecorder.stop()
				this.mediaRecorder.stream.stop()
			}
		},
		// 错误处理方法
		onMediaError(e) {
			console.log('阿偶~您的浏览器貌似不支持录音哦...', e)
			clearInterval(this.intervaltimerid)
			this.tiptext = '点击录音'
			this.recording = false
			this.$message.error('您的浏览器暂不支持录音功能')
		},
		// 成功
		onMediaSuccess(stream) {
			this.mediaRecorder = new MediaStreamRecorder(stream)
			// 获取音频流
			this.mediaRecorder.stream = stream
			this.mediaRecorder.mimeType = 'audio/wav'
			var _that = this
			this.mediaRecorder.ondataavailable = function(blob) {
				clearInterval(_that.intervaltimerid)
				var reader = new FileReader()
				reader.readAsArrayBuffer(blob)
				reader.onload = function () {
					//音频数据
					console.log(new Int8Array(reader.result))
				}
				const url = URL.createObjectURL(blob)
				_that.$refs.audioRecorder.src = url
				_that.$emit('handleStop', {
					url: url,
					mblob: blob
				})
			}
			// 定义间隔
			this.mediaRecorder.start(this.timelimit * 1000)
		},
		// 开始记录方法
		captureRecord() {
			navigator.mediaDevices
					.getUserMedia(this.mediaConstraints)
					.then(this.onMediaSuccess)
					.catch(this.onMediaError)
		},
		stopRecorder(){
				console.log("stop");
			},
			playRecorder(){
				console.log("play")
			},
			getMessage(msg){
				console.log(msg);
				let jsonData = JSON.parse(msg.data)
				if(jsonData.action == "started"){
					console.log("握手成功")
				}else if(jsonData.action == "result"){
					// console.log(typeof (JSON.parse(JSON.parse(msg.data).data))+"--"
					// 		+JSON.parse(JSON.parse(msg.data).data).cn.st.rt[0].ws[0].cw[0].w)
					console.log(jsonData);
				}else if(jsonData.action == "error"){
					console.log("出错了:"+jsonData)
				}else{
					console.log("无")
				}
		},
		getHandShakeParams(){
			var appId = this.appId
			var secretKey = this.apiKey
			var ts = Math.floor(new Date().getTime()/1000)
			var signa = this.$md5(appId + ts)
			var signatureSha = this.$cryptoJS.HmacSHA1(signa, secretKey)
			var signature = this.$cryptoJS.enc.Base64.stringify(signatureSha)
			signature = encodeURIComponent(signature)
			return "?appid=" + appId + "&ts=" + ts + "&signa=" +signature + "&punc="+0;
    	}
	},
  props: {
	msg: String,
	timelimit: {
		default: 60, // 默认为1min
		type: Number
	},
	  pushurl: {
		default: '', // 上传到服务器的路径
		 type: String
	  }
  }
}
</script>

<style scoped>

</style>
